<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >
      <el-container style="border: 1px solid #eee">
        <el-header class="el-header" style="height: 60px;">
          <div style="margin-top: 15px;display: inline">
            <el-input
              v-model="kwInput"
              style="width: 60%"
              placeholder="输入关键词搜索"
              class="input-with-select"
              @keyup.enter.native="onSubmit"
            >
              <el-button slot="append" type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
            </el-input>
            <el-button type="success" @click="OperAdd">新增</el-button>
            <el-button type="success" @click="ReviewSync">同步</el-button>
          </div>

        </el-header>
        <el-main v-loading="loading">

          <el-card
            v-for="(item,index) in data"
            :key="item.id"
            :body-style="{ padding: '0px' }"
            style="padding: 15px;width: 320px;float: left;"
          >
            <div slot="header" class="clearfix">
              <span>{{ item.content }}</span>

              <!--<el-button style="float: right; padding: 3px 0" type="text">编辑</el-button>-->
              <el-dropdown style="float: right; padding: 3px 0">
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native.stop="handleModify(item)">编辑</el-dropdown-item>
                  <el-dropdown-item @click.native.stop="handleDelete(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="text item">
              <span style="display: block">{{ item.title }}</span>
              <span style="display: block; position: relative;right: -200px;">{{ item.customer_name }}</span>
              <div style="display: block">
                <span style="float: left">{{ item.date_add }}</span>
                <span style="float: right;bottom: 1px;"><el-rate v-model="item.grade" disabled /></span>
              </div>

            </div>
          </el-card>
        </el-main>
        <el-pagination
          v-if="data.length"
          style="float: right"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[12,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
        <el-dialog
          v-loading="addloading"
          append-to-body
          title="添加新评论"
          :visible.sync="innerDialogVisible"
          :close-on-click-modal="false"
        >
          <el-form :model="temp" label-position="left" label-width="80px">
            <el-form-item label="name">
              <el-input v-model="temp.customer_name" />
            </el-form-item>
            <el-form-item label="title">
              <el-input v-model="temp.title" />
            </el-form-item>

            <el-form-item label="content">
              <el-input v-model="temp.content" type="textarea" />
            </el-form-item>
            <el-form-item label="评分">
              <el-rate v-model="temp.grade" />
            </el-form-item>
            <el-form-item label="是否显示">
              <el-switch
                v-model="temp.validate"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="显示"
                inactive-text="不显示"
              />
            </el-form-item>

            <el-form-item label="日期">
              <el-date-picker
                v-model="temp.date_add"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions1"
              />
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="innerDialogVisible = false">取 消</el-button>
            <el-button type="danger" @click="handleAddComment">确 定</el-button>
          </span>
        </el-dialog>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <a target="_blank" :href="product_url" style="float: left">打开产品</a>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Get, Post, formatDate, Sync, Delete, Put } from '@/api/review/review'
import qs from 'qs'

export default {
  name: 'Review',
  props: ['target_id', 'product_url', 'review_visuable', 'title'],
  data() {
    return {
      dialogVisible: false,
      query: '',
      select: '-1',
      isModify: false,
      webs: [],
      data: [],
      loading: false,
      kwInput: '',
      order_by: '',
      order_desc: '',
      // pagination
      pagesize: 12,
      page: 1,
      total: 0,
      // dialog
      addloading: false,
      innerDialogVisible: false,
      temp: {
        title: '',
        customer_name: '',
        content: '',
        date_add: '',
        grade: 5,
        validate: true,
        id: ''
      },
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  watch: {
    target_id(v) {
      if (v) {
        this.onSubmit()
      }
    },
    review_visuable(v) {
      this.dialogVisible = v
    }
  },
  created() {
    if (this.target_id) {
      this.onSubmit()
    }
  },
  methods: {
    close() {
      this.dialogVisible = false
      this.$emit('closeDialog', false)
    },
    onSubmit() {
      if (this.target_id <= 0) {
        return
      }
      this.loading = true
      Get(null, qs.stringify({
        kw: this.kwInput,
        product_id: this.target_id,
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc
      }))
        .then(response => {
          this.data = response.data.data
          console.log(this.data)
          this.loading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    OperAdd() {
      this.innerDialogVisible = true
      this.isModify = false
    },
    ReviewSync() {
      this.loading = true
      Sync(this.target_id)
        .then(response => {
          this.onSubmit()
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
    },
    handleModify(item) {
      this.isModify = true
      this.temp.customer_name = item.customer_name
      this.temp.title = item.title
      this.temp.content = item.content
      this.temp.date_add = new Date(item.date_add.replace('/-/g', '/'))
      this.temp.validate = item.validate === 1
      this.temp.grade = item.grade
      this.temp.id = item.id
      this.innerDialogVisible = true
    },
    handleDelete(item) {
      this.$confirm(`确认要删除该评论:${item.title} 不可恢复?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Delete(item.id)
          .then(response => {
            this.$notify({
              title: '成功',
              message: '删除',
              type: 'success',
              duration: 2000
            })
            this.onSubmit()
          }).catch(err => {
            console.log(err)
          })
      }).catch(() => {
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.onSubmit()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.onSubmit()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.onSubmit()
    },
    handleAddComment() {
      this.loading = false
      this.addloading = true
      const dd = formatDate(this.temp.date_add, 'yyyy-MM-dd hh:mm:ss')
      if (this.isModify) {
        Put(this.temp.id, {
          product_id: this.target_id,
          title: this.temp.title,
          customer_name: this.temp.customer_name,
          content: this.temp.content,
          date_add: dd,
          grade: this.temp.grade,
          validate: this.temp.validate ? 1 : 0,
          id: this.temp.id
        })
          .then(response => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            this.addloading = false
            this.onSubmit()
            this.innerDialogVisible = false
            this.temp.customer_name = ''
            this.temp.title = ''
            this.temp.content = ''
          }).catch(err => {
            console.log(err)
            this.addloading = false
          })
      } else {
        Post({
          product_id: this.target_id,
          title: this.temp.title,
          customer_name: this.temp.customer_name,
          content: this.temp.content,
          date_add: dd,
          grade: this.temp.grade,
          validate: this.temp.validate ? 1 : 0
        })
          .then(response => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
            this.addloading = false
            this.onSubmit()
            this.innerDialogVisible = false
            this.temp.customer_name = ''
            this.temp.title = ''
            this.temp.content = ''
          }).catch(err => {
            console.log(err)
            this.addloading = false
          })
      }
    }
  }
  // computed: {
  //   target_id: function() {
  //     return this.$route.query.target_id
  //   }
  // }
}
</script>

<style scoped>
  .app-container >>> .el-select .el-input {
    width: 130px;
  }

  .app-container >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .app-container >>> .text {
    font-size: 14px;
  }

  .app-container >>> .text p.title {
    font-weight: bold;
    font-weight: 600;
  }

  .app-container >>> .text p.desc {
    font-size: 10px;
  }

  .app-container >>> .text em {
    color: red;
  }

  .app-container >>> .text span.a {
    color: #3A7734;
  }

  .app-container >>> .item {
    margin-bottom: 1px;
  }

  .app-container >>> .clearfix:before,
  .app-container >>> .clearfix:after {
    display: table;
    content: "";
  }

  .app-container >>> .clearfix:after {
    clear: both
  }

  .app-container >>> .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .app-container >>> .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .app-container >>> .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
